﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Ecology</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- FONT ICONS -->
<link rel="stylesheet" href="assets/elegant-icons/style.css">
<link rel="stylesheet" href="assets/et-line-font/style.css">

 <!-- OWL CAROUSEL -->
 <link rel="stylesheet" href="css/owl.theme.css">
 <link rel="stylesheet" href="css/owl.carousel.css">
    
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">
 	
    <!-- Preloader -->
    <div class="preloader"></div>
    
 	
    <!-- Main Header -->
    <header class="main-header">
    	<div class="top-bar">
        	<div class="top-container">
            	<!--Info Outer-->
                 <div class="info-outer">
                 	<!--Info Box-->
                    <ul class="info-box clearfix">
                        <li><span class="icon flaticon-technology-5" th:text="${user.username}"></span><a href="#">&nbsp;</a></li>
                        
                    </ul>
                 </div>
            </div>
        </div>
    	<!-- Header Upper -->
        <div class="header-upper">
            <div class="auto-container clearfix">
                <!-- Logo -->
                <div class="logo">
                    <a href="index.html"><img src="../static/images/logo-1-unused.png" alt="Ecology"></a>
                 </div>
                 
                 <!--Nav Outer-->
                <div class="nav-outer clearfix">
                    
                    <a href="#" class="theme-btn btn-donate" data-toggle="modal" data-target="#donate-popup">Donate</a>
                    
                    <!-- Main Menu -->
                    <nav class="main-menu">
                        
                        <div class="navbar-header">
                            <!-- Toggle Button -->      
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        
                        <div class="navbar-collapse collapse clearfix">
                            <ul class="navigation">
                                <li><a href="/search">概览</a></li>
                                <li><a href="#">服务</a></li>
                                <li><a href="events.html">Events List</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="gallery.html">Gallery</a></li>
                                <li><a href="contact.html">Contact Us</a></li>
                            </ul>
                        </div>
                    </nav><!-- Main Menu End-->
                    
                </div>
                
            </div>
        </div><!-- Header Top End -->
    </header><!--End Main Header -->
    
    
    <!--Page Title-->
    <section class="page-title" style="background-image:url(images/background/page-title-bg.jpg);">
    	<div class="auto-container">
        	<div class="sec-title">
                <h1>Our Services</span></h1>
                <div class="bread-crumb"><a href="index.html">Home</a> / <a href="#" class="current">Services</a></div>
            </div>
        </div>
    </section>
    
    
    <!--Main Features-->
    <section class="main-features">
    	<div class="auto-container">
        	  <div class="sec-title text-center">
                <h2>we cover the sectors</span></h2>
                <div class="text">Lorem ipsum dolor sit amet, cum at inani interessetnisl omnium dolor amet amet qco modo cum text </div>
            </div>
            
            <div class="row clearfix">
            	
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-genius"></i></div>
                        </div>
                        <h3>Ecology</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-dial"></i></div>
                        </div>
                        <h3>clean water</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-recycle"></i></div>
                        </div>
                        <h3>recycle</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-flag"></i></div>
                        </div>
                        <h3>organic food</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-beaker"></i></div>
                        </div>
                        <h3>Waste Management</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-ribbon"></i></div>
                        </div>
                        <h3>renewable energy</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-global "></i></div>
                        </div>
                        <h3>Save Forest</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
                <!--Default Icon Column-->
                <div class="default-icon-column col-lg-3 col-md-6 col-xs-12">
                	<article class="inner-box">
                    	<div class="icon-box">
                        	<div class="icon"><i class="icon-linegraph"></i></div>
                        </div>
                        <h3>Solar power</h3>
                        <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea </div>
                    </article>
                </div>
                
            </div>
        </div>
    </section>
    
       
    
    <!--Recent Projects Section-->
    <section class="recent-projects">
        <div class="auto-container">
            
            <div class="sec-title clearfix">
                <div class="pull-left">
                    <h2>RECENT Projects</span></h2>
                    <div class="text">Lorem ipsum dolor sit amet, cum at inani interesset, nisl fugit munere ad mel,vix an omnium dolor amet </div>
                </div>
                
            </div>
            <div class="row clearfix">
                
                <!--Default Featured Column-->
                <div class="column default-featured-column col-md-4 col-sm-6 col-xs-12">
                    <article class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <figure class="image-box">
                            <a href="#"><img src="images/resource/featured-image-1.jpg" alt=""></a>
                        </figure>
                        <div class="content-box">
                            <h3><a href="#">Pure drinking water</a></h3>
                            <div class="column-info">Congo, Africa</div>
                            <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea ne.</div>
                            <a href="#" class="theme-btn btn-style-three">Learn More</a>
                        </div>
                    </article>
                </div>
                
                <!--Default Featured Column-->
                <div class="column default-featured-column col-md-4 col-sm-6 col-xs-12">
                    <article class="inner-box wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <figure class="image-box">
                            <a href="#"><img src="images/resource/featured-image-2.jpg" alt=""></a>
                        </figure>
                        <div class="content-box">
                            <h3><a href="#">Solar power Plant</a></h3>
                            <div class="column-info">Chennai, India</div>
                            <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea ne.</div>
                            <a href="#" class="theme-btn btn-style-three">Learn More</a>
                        </div>
                    </article>
                </div>
                
                <!--Default Featured Column-->
                <div class="column default-featured-column col-md-4 col-sm-6 col-xs-12">
                    <article class="inner-box wow fadeInLeft" data-wow-delay="600ms" data-wow-duration="1500ms">
                        <figure class="image-box">
                            <a href="#"><img src="images/resource/featured-image-3.jpg" alt=""></a>
                        </figure>
                        <div class="content-box">
                            <h3><a href="#">Renewable energy</a></h3>
                            <div class="column-info">Sudan, africa</div>
                            <div class="text">Lorem ipsum dolor sit amet et siu amet amet audiam copiosaei mei purto dolor timeam mea ne.</div>
                            <a href="#" class="theme-btn btn-style-three">Learn More</a>
                        </div>
                    </article>
                </div>
                
                
                
            </div>
        </div>
    </section>
    
    
   <!-- =========================
          TESTIMONIALS
     ============================== -->

          <section class="testimonial">
           <div class=" pad-top-90 container">
            <div class="row">
             <div class="col-md-12">

                     <div class="sec-title text-center">
                <h2>Some good words</h2>
                <div class="text">Lorem ipsum dolor sit amet, cum at inani interessetnisl omnium dolor amet amet qco modo cum text </div>
            </div>

                    <div class="row">

                          <div class="testimonials">
         <div class="color-overlay">
          <div class="container wow fadeIn animated" data-wow-offset="10" data-wow-duration="1.5s">
           <!-- FEEDBACKS  STARTS-->
           <div class="col-md-6  text-center center-col">
            <div id="feedbacks-2" class="owl-carousel owl-theme ">
             <!-- SINGLE FEEDBACK -->
             <div class="feedback">
              <!-- IMAGE -->
              <div class="image">
               <img src="images/clients-pic/c-3.jpg" alt="">
             </div>
             <div class="message">
               Now that we have a firm handle on just how important exercise is, it’s become all the rage. People are running to shed those pounds, stay in shape, and hopefully live a slightly longer, happier life.
             </div>
             <!-- INFORMATION -->
             <div class="name">
               Phillip Morris.
             </div>
             <div class="company-info">
               Creation Studio.
             </div>
           </div>
           <!-- /END SINGLE FEEDBACK -->
           <!-- SINGLE FEEDBACK -->
           <div class="feedback">
            <!-- IMAGE -->
            <div class="image">
             <img src="images/clients-pic/c-1.jpg" alt="">
           </div>
           <div class="message">
             Now that we have a firm handle on just how important exercise is, it’s become all the rage. People are running to shed those pounds, stay in shape, and hopefully live a slightly longer, happier life.
           </div>
           <!-- INFORMATION -->
           <div class="name">
             Phillip Morris.
           </div>
           <div class="company-info">
             Creation Studio.
           </div>
         </div>
         <!-- /END SINGLE FEEDBACK -->
         <!-- SINGLE FEEDBACK -->
         <div class="feedback">
          <!-- IMAGE -->
          <div class="image">
           <img src="images/clients-pic/c-2.jpg" alt="">
         </div>
         <!-- MESSAGE -->
         <div class="message">
           Now that we have a firm handle on just how important exercise is, it’s become all the rage. People are running to shed those pounds, stay in shape, and hopefully live a slightly longer, happier life.
           <!-- INFORMATION -->
           <div class="name">
            Phillip Morris.
          </div>
          <div class="company-info">
            Creation Studio.
          </div>
        </div>
        <!-- /END SINGLE FEEDBACK -->
      </div>
      <!-- /END FEEDBACKS -->
    </div>
  </div>
  <!-- /END CONTAINER -->
</div>
<!-- /END COLOR OVERLAY -->
</div>
</div> <!-- /END ROW -->



                    </div>   <!-- /END ROW -->

                      </div>
                     </div>
                    </div>
    
    </section>
    
    
    <!--Intro Section-->
    <section class="subscribe-intro">
    	<div class="auto-container">
        	<div class="row clearfix">
            	<!--Column-->
                <div class="column col-md-9 col-sm-12 col-xs-12">
                	<h2>Subcribe for Newsletter</h2>
                    There are many variations of passages of Lorem Ipsum available but the majority have 
                </div>
                <!--Column-->
                <div class="column col-md-3 col-sm-12 col-xs-12">
                	<div class="text-right padd-top-20">
                		<a href="#" class="theme-btn btn-style-one">Subscribe Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
	
    
    <!--Main Footer-->
    <footer class="main-footer" style="background-image:url(images/background/footer-bg.jpg);">
        
        <!--Footer Upper-->        
        <div class="footer-upper">
            <div class="auto-container">
                <div class="row clearfix">
                    
                    <!--Two 4th column-->
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="row clearfix">
                            <div class="col-lg-7 col-sm-6 col-xs-12 column">
                                <div class="footer-widget about-widget">
                                    <div class="logo"><a href="index.html"><img src="../static/images/logo-2-unuse.png" class="img-responsive" alt=""></a></div>
                                    
                                    
                                    <ul class="contact-info">
                                        <li><span class="icon fa fa-map-marker"></span> 447, Broad Way, NewYork</li>
                                        <li><span class="icon fa fa-phone"></span> +11-08-35679</li>
                                        <li><span class="icon fa fa-envelope-o"></span> hello@ecology.com</li>
                                    </ul>
                                    
                                    <div class="social-links-two clearfix">
                                        <a href="#" class="facebook img-circle"><span class="fa fa-facebook-f"></span></a>
                                        <a href="#" class="twitter img-circle"><span class="fa fa-twitter"></span></a>
                                        <a href="#" class="google-plus img-circle"><span class="fa fa-google-plus"></span></a>
                                        <a href="#" class="linkedin img-circle"><span class="fa fa-pinterest-p"></span></a>
                                        <a href="#" class="linkedin img-circle"><span class="fa fa-linkedin"></span></a>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <!--Footer Column-->
                            <div class="col-lg-5 col-sm-6 col-xs-12 column">
                                <h2>About us</h2>
                                <div class="footer-widget links-widget">
                                    
                                <p>Above the law sunny days sweeping the clouds away fateful trip .That started my way to where the air is sweet can you tell me how to get .</p>
                                </div>
                            </div>
                        </div>
                    </div><!--Two 4th column End-->
                    
                    <!--Two 4th column-->
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="row clearfix">
                        
                            
                            <!--Footer Column-->
                            <div class="col-lg-5 col-sm-6 col-xs-12 column">
                                <div class="footer-widget links-widget">
                                    <h2>Recent projects</h2>
                                    <ul>
                                        <li><a href="#">tree plantation</a></li>
                                        <li><a href="#">Drinking water supply</a></li>
                                        <li><a href="#">Campaign</a></li>
                                        <li><a href="#">Waste management</a></li>
                                        
                                        
                                    </ul>
        
                                </div>
                            </div>

                            <!--Footer Column-->
                            <div class="col-lg-7 col-sm-6 col-xs-12 column">
                                <div class="footer-widget news-widget">
                                    <h2>Latest News</h2>    
                                    
                                    <!--News Post-->
                                    <div class="news-post">
                                        <div class="icon"></div>
                                        <div class="news-content"><figure class="image-thumb"><img src="images/resource/post-thumb-4.jpg" alt=""></figure><a href="#">That started my way to where the air is sweet can you tell me how to get</a></div>
                                        
                                    </div>
                                    
                                    <!--News Post-->
                                    <div class="news-post">
                                        <div class="icon"></div>
                                        <div class="news-content"><figure class="image-thumb"><img src="images/resource/post-thumb-5.jpg" alt=""></figure><a href="#">That started my way to where the air is sweet can you tell me how to get</a></div>
                                        
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div><!--Two 4th column End-->
                    
                </div>
                
            </div>
        </div>
        
        <!--Footer Bottom-->
        <div class="footer-bottom">
            <div class="auto-container clearfix">
                <!--Copyright-->
                <div class="copyright text-center">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://www.17sucai.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
            </div>
        </div>
        
    </footer>
    
</div>
<!--End pagewrapper-->


<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="fa fa-long-arrow-up"></span></div>

<!--Donate Popup-->
<div class="modal fade pop-box" id="donate-popup" tabindex="-1" role="dialog" aria-labelledby="donate-popup" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        	<!--Donation Section-->
            <section class="donation-section">
                <div class="donation-form-outer">
                    <form method="post" action="contact.html">
                        
                        <!--Form Portlet-->
                        <div class="form-portlet">
                            <h3>How Much Would you like to Donate?</h3>
                            
                            <div class="row clearfix">
                                <div class="form-group col-lg-7 col-md-12 col-xs-12 clearfix">
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-1">
                                        <label for="amount-1">$10</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-2" checked>
                                        <label for="amount-2">$25</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-3">
                                        <label for="amount-3">$50</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-4">
                                        <label for="amount-4">$100</label>
                                    </div>
                                    
                                    <div class="radio-select">
                                        <input type="radio" name="sel-amount" id="amount-5">
                                        <label for="amount-5">$150</label>
                                    </div>
                                    
                                </div>
                                
                                <div class="form-group other-amount col-lg-5 col-md-8 col-xs-12 padd-top-10">
                                    
                                    <input type="text" name="other-amount" value="" placeholder="Or Other Amount">
                                    
                                </div>
                                
                            </div>
                        </div>
                        
                        <br>
                        
                        <!--Form Portlet-->
                        <div class="form-portlet">
                            <h4>Billing Information</h4>
                            
                            <div class="row clearfix">
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">First Name <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="First Name" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Last Name <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Last Name" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Email <span class="required">*</span></div>
                                    <input type="email" name="name" value="" placeholder="Email" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Phone <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Phone" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Address 1 <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Address 1" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Address 2 <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Address 2" required>
                                </div>
                                
                            </div>
                        </div>
                        
                        <br>
                        
                        <!--Form Portlet-->
                        <div class="form-portlet">
                            <h4>Payment Information</h4>
                            
                            <div class="payment-option-logo"><img class="img-responsive" src="images/resource/payment-logos.png" alt=""></div>
                            <br>
                            
                            <div class="row clearfix">
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Card Number <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Card Number" required>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Card Holder Name <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Card Holder Name" required>
                                </div>
                                
                                
                                
                                <div class="form-group col-lg-3 col-md-3 col-xs-12">
                                    <div class="field-label">Expire Date <span class="required">*</span></div>
                                    <select>
                                        <option>01</option>
                                        <option>02</option>
                                        <option>03</option>
                                        <option>04</option>
                                        <option>05</option>
                                        <option>06</option>
                                        <option>07</option>
                                        <option>08</option>
                                        <option>09</option>
                                        <option>10</option>
                                        <option>11</option>
                                        <option>12</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-lg-3 col-md-3 col-xs-12">
                                    <div class="field-label">&nbsp;</div>
                                    <select>
                                        <option>2016</option>
                                        <option>2017</option>
                                        <option>2018</option>
                                        <option>2019</option>
                                        <option>2020</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                    <div class="field-label">Security Code (CVC) <span class="required">*</span></div>
                                    <input type="text" name="name" value="" placeholder="Security Code" required>
                                </div>
                                
                            </div>
                        </div>
                        
                        <div class="text-left"><button type="submit" class="theme-btn btn-style-two">Donate Now</button></div>
                        
                    </form>
                </div>
            </section>
        </div>
    <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/wow.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
